<template>
  <div class="hamburger-container" @click="toggleClick">
    <svg-icon icon-class="hamburger" :class="{ 'is-active': isActive }" />
  </div>
</template>

<script setup lang="ts">
defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['toggleClick'])

const toggleClick = () => {
  emit('toggleClick')
}
</script>

<style lang="scss" scoped>
.hamburger-container {
  padding: 0 15px;
  height: 100%;
  float: left;
  cursor: pointer;
  transition: background .3s;
  -webkit-tap-highlight-color:transparent;

  &:hover {
    background: rgba(0, 0, 0, .025)
  }
}

.svg-icon {
  &.is-active {
    //transform: rotate(90deg);
  }
  transition: transform 0.3s ease-in-out;
}
</style>
